<template>
    <!-- 头部 搜索、新增 区域 -->
    <el-row :gutter="20" class="header">
        <el-col :span="6">
            <el-input v-model="search" placeholder="请输入 工单备注 / 报事人名称" clearable>
                <template #append>
                    <el-button @click="getWorkOrder"> 搜索 </el-button>
                </template>
            </el-input>
        </el-col>
    </el-row>

    <!-- 华丽的分割线 -->
    <el-divider />

    <!-- 表格形式展示workOrder数据 -->
    <div>
        <el-table :data="workOrderData" style="width: 100%" max-height="490px">
            <el-table-column prop="id" v-if="false" />
            <el-table-column prop="reportAddress" label="报事位置" width="180" sortable/>
            <el-table-column prop="houseName" label="所属房屋" width="100" v-if="false" />
            <el-table-column prop="submitterName" label="报事人" width="80" />

            <el-table-column prop="orderTime" label="下单时间" width="110" sortable/>
            <el-table-column prop="status" label="工单状态" width="110" sortable>
                <template #default="{ row }">
                    <el-button v-if="row.completeStatus == '1'" @click="showProcess(row.id)" type="primary"
                        plain>待接收</el-button>
                    <el-button v-if="row.completeStatus == '2'" @click="showProcess(row.id)" type="warning"
                        plain>处理中</el-button>
                    <el-button v-if="row.completeStatus == '3'" @click="showProcess(row.id)" type="success"
                        plain>已完成</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="工单类别" width="110" sortable>
                <template #default="{ row }">
                    <el-tag type="" size="small">{{ row.categoryName }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="orderRemark" label="工单备注" width="250" />
            <el-table-column prop="closeStatus" label="关单状态" width="110" sortable>
                <template #default="{ row }">
                    <el-tag v-if="row.closeStatus == '0'" type="success">未关闭</el-tag>
                    <el-tag v-if="row.closeStatus == '1'" type="info">已关闭</el-tag>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="关闭/打开" width="150">

                <template #default="{ row }">
                    <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="switchCloseStatus(row.id)" icon-color="#F56C6C" title="确认切换工单开/关状态？">
                        <template #reference>
                            <el-button link type="primary" size="small">关闭/打开</el-button>
                        </template>
                    </el-popconfirm>
                </template>

            </el-table-column>


        </el-table>
    </div>

    <!-- 底部分页器 -->
    <div v-if="total > 0">
        <div class="page-box">
            <div class="pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :small="true" :disabled="false" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getWorkOrder"
                    @current-change="getWorkOrder" />
            </div>
        </div>
    </div>

    <!-- 弹出层 -->
    <!-- 工单流程弹出层 -->
    <el-dialog v-model="WorkOrderProcessDialog" title="工单流程" width="55%">
        <el-table :data="currentShowWorkOrder" style="width: 100%">
            <el-table-column prop="statusName" label="节点名称" width="80">
                <template #default="{ row }">
                    <el-tag effect="plain">{{ row.statusName }}</el-tag>
                </template>
            </el-table-column>>
            <el-table-column prop="startTime" label="处理时间" width="150" />
            <el-table-column prop="handler" label="处理人" width="80" />
            <el-table-column prop="remark" label="处理备注" width="380" />
            <el-table-column prop="completeStatus" label="处理状态" width="80">
                <template #default="{ row }">
                    <el-tag v-if="row.completeStatus == '0'" type="warning" plain>未完成</el-tag>
                    <el-tag v-if="row.completeStatus == '1'" type="success" plain>已完成</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>



<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();

import { workorderGetService, workordeGetProcessInfoService, workorderSwitchCloseStatusService } from '@/api/workorder';


// 初始化参数
// 按姓名模糊搜索、分页
const search = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 工单信息列表
const workOrderData = ref([])
// 新增、编辑弹出层的显示/隐藏控制
const WorkOrderProcessDialog = ref(false)   // 查看工单流程弹窗
const currentShowWorkOrder = ref([])    // 当前工单流程数据

// 获取工单信息
async function getWorkOrder() {
    try {
        let result = await workorderGetService(search.value, currentPage.value, pageSize.value)
        if (result.code == 200) {
            workOrderData.value = result.data.list;
            total.value = result.data.total;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error('系统异常 (getWorkOrder)')
    }
}
// 展示工单流程
const showProcess = (workOrderId) => {
    getProcessInfo(workOrderId) // 获取当前工单的处理信息
    WorkOrderProcessDialog.value = true  // 打开展示工单流程节点的弹窗
}
// 格式化工单流程数据
const formatWorkOrderData = () => {
    currentShowWorkOrder.value.forEach(item => {
        if (item.startTime == 0) {
            item.startTime = '/'
            item.handler = '/'
            item.remark = '/'
        }
        else {
            // 将时间戳转换为常见时间格式
            item.startTime = new Date(item.startTime).toLocaleString()
        }
    })
}
// 获取当前工单的处理信息
async function getProcessInfo(workOrderId) {
    try {
        let result = await workordeGetProcessInfoService(workOrderId)
        if (result.code == 200) {
            currentShowWorkOrder.value = result.data;
            formatWorkOrderData()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (getProcessInfo)')
    }
}
// 更改工单的关单状态
async function switchCloseStatus(id) {
    try {
        let result = await workorderSwitchCloseStatusService(id)
        if (result.code == 200) {
            ElMessage.success(result.msg)
            getWorkOrder()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
        else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常 (switchCloseStatus)')
    }
}

getWorkOrder();

</script>

<style>
.header {
    margin-bottom: 7px;
}
</style>